<template>
  <div>
    <el-tree :data="treeData" node-key="name" @node-click="clickValue" current-node-key="黄冈市" :default-expanded-keys="['黄冈市']" :default-checked-keys="['黄冈市']" :props="defaultProps" :highlight-current="true">
    </el-tree>
  </div>
</template>

<script>
import { getDistrictData } from '@/api/gloab'

export default {
  data () {
    return {
      treeData: [
        {
          name: '湖北省',
          children: []
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    async getTreeData () {
      const res = await getDistrictData({
        province: '湖北省',
        name: '',
        hasChildren: true
      })
      if (res.status === 'OK') {
        this.treeData[0].children = res.data[0]
        this.clickValue('黄冈市')
      }
    },
    clickValue (data) {
      console.log(data)
      this.$emit('clickValue', data.name)
    }
  },
  created () {
    this.getTreeData()
  }
}
</script>
